<template>
  <view class="deletion-request-page">
    <main class="page-content">
      <!-- Header: Display App and Developer Name -->
      <view class="page-header">
        <h1>{{ appName }}</h1>
        <text class="dev-name">Provided by: {{ developerName }}</text>
      </view>

      <text class="description">
        To protect your privacy and data security, you can submit an account deletion request through the form below. After submission, we will complete the processing within {{ processingDays }} business days.
      </text>

      <form class="deletion-form">
        <view class="form-group">
          <label for="userIdentity">
            Account Identifier (Email / Phone Number / User ID)
            <text class="required">*</text>
          </label>
          <input
            id="userIdentity"
            v-model="formData.userIdentity"
            type="text"
            placeholder="Please enter your account information registered in this application"
            class="uni-input"
            :class="{ 'is-invalid': errors.userIdentity }" />
          <text v-if="errors.userIdentity" class="error-message">{{ errors.userIdentity }}</text>
        </view>

        <view class="form-group">
          <label for="reason">Reason for Deletion (Optional)</label>
          <textarea
            id="reason"
            v-model="formData.reason"
            placeholder="Please enter the reason why you wish to delete your account (optional)"
            rows="4"
            class="uni-textarea"></textarea>
        </view>

        <view class="form-group checkbox-wrapper">
          <checkbox :checked="formData.confirmDeletion" @click="toggleConfirm"></checkbox>
          <label class="checkbox-label" @click="toggleConfirm">
            I confirm that I request to delete my account and all related data.
          </label>
        </view>
        <text v-if="errors.confirmDeletion" class="error-message">{{ errors.confirmDeletion }}</text>

        <button class="submit-button" :disabled="isSubmitting" @click="submitRequest">
          {{ isSubmitting ? 'Submitting...' : 'Submit Deletion Request' }}
        </button>

        <text v-if="submitMessage" :class="['submit-feedback', submitStatus]">
          {{ submitMessage }}
        </text>
      </form>

      <text class="processing-note">
        We will process your request within {{ processingDays }} business days and confirm with you via email.
      </text>

      <text class="contact-info">
        If you have any questions, please contact:
        <text class="email-link" @click="copyEmail">{{ supportEmail }}</text>
      </text>
    </main>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { deleteUser } from '@/api/user.js'

// ================= Configuration Information =================
const appName = ref('NxunAi') // ✅ Replace with your app's official name (must match Google Play)
const developerName = ref('Australia Rennan Group Pty Ltd') // ✅ Replace with Google Play Console developer or company name
const supportEmail = ref('cjc16888@126.com') // ✅ Replace with customer service email
const processingDays = ref(7)
// =============================================================

// Set navigation bar title
onMounted(() => {
  if (typeof uni !== 'undefined' && uni.setNavigationBarTitle) {
    uni.setNavigationBarTitle({
      title: 'Delete Account'
    })
  }
})

// Form data
const formData = reactive({
  userIdentity: '',
  reason: '',
  confirmDeletion: false
})

const errors = reactive({
  userIdentity: '',
  confirmDeletion: ''
})

const isSubmitting = ref(false)
const submitMessage = ref('')
const submitStatus = ref('')

// Toggle checkbox
const toggleConfirm = () => {
  formData.confirmDeletion = !formData.confirmDeletion
}

// Form validation
const validateForm = () => {
  let valid = true
  errors.userIdentity = ''
  errors.confirmDeletion = ''
  if (!formData.userIdentity.trim()) {
    errors.userIdentity = 'Please enter your account identifier'
    valid = false
  }
  if (!formData.confirmDeletion) {
    errors.confirmDeletion = 'Please check to confirm account deletion'
    valid = false
  }
  return valid
}

// Submit form
const submitRequest = async (e) => {
  e.preventDefault()
  if (!validateForm()) return

  isSubmitting.value = true
  submitMessage.value = ''
  submitStatus.value = ''

  try {
    formData.name = formData.userIdentity
    await deleteUser(formData)
    submitMessage.value = `Your request has been submitted. We will process it within ${processingDays.value} business days.`
    submitStatus.value = 'success'
    formData.userIdentity = ''
    formData.reason = ''
    formData.confirmDeletion = false
  } catch (err) {
    console.error(err)
    submitMessage.value = 'Submission failed. Please try again later.'
    submitStatus.value = 'error'
  } finally {
    isSubmitting.value = false
  }
}

// Copy email
const copyEmail = () => {
  uni.setClipboardData({
    data: supportEmail.value,
    success: () => {
      uni.showToast({ title: 'Customer service email copied', icon: 'none' })
    }
  })
}
</script>

<style scoped>
.deletion-request-page {
  max-width: 700px;
  margin: 30rpx auto;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  padding: 30rpx;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.page-header {
  text-align: center;
  margin-bottom: 20rpx;
}
.page-header h1 {
  font-size: 20px;
  margin-bottom: 5rpx;
  color: #333;
}
.dev-name {
  font-size: 14px;
  color: #666;
}
.description {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 25rpx;
  display: block;
}
.form-group {
  margin-bottom: 30rpx;
}
label {
  font-weight: 500;
  display: block;
  margin-bottom: 8rpx;
  color: #333;
}
.required {
  color: #e74c3c;
  margin-left: 4rpx;
}
.uni-input,
.uni-textarea {
  width: 100%;
  padding: 20rpx 12rpx;
  min-height: 88rpx;
  border: 1px solid #ccc;
  border-radius: 6rpx;
  font-size: 15px;
  box-sizing: border-box;
  line-height: 1.5;
}
.is-invalid {
  border-color: #e74c3c;
}
.checkbox-wrapper {
  display: flex;
  align-items: center;
}
.checkbox-label {
  margin-left: 10rpx;
  font-size: 14px;
  color: #333;
}
.submit-button {
  width: 100%;
  padding: 15rpx;
  background-color: #2196f3;
  color: #fff;
  border-radius: 6rpx;
  border: none;
  font-size: 16px;
}
.submit-button:disabled {
  background-color: #b3e5fc;
}
.submit-feedback {
  text-align: center;
  margin-top: 15rpx;
}
.submit-feedback.success {
  color: #4caf50;
}
.submit-feedback.error {
  color: #f44336;
}
.processing-note,
.contact-info {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 25rpx;
  line-height: 1.6;
}
.email-link {
  color: #2196f3;
  text-decoration: underline;
  cursor: pointer;
}
</style>
